import Vue from 'vue'
import App from './App.vue'
import '@/assets/css/bootstrap.css'

Vue.config.productionTip = false

// 1.导入Vue和Vuex依赖包
import Vuex from "vuex"

// 2.把Vuex安装Vue的插件
Vue.use(Vuex)

// 3.创建store的实例对象
const store = new Vuex.Store({
  // 全局存储共享数据
  state: {
    count: 0,
    name: "胡文帅",
    arr: [1, 2, 3, 4, 5, 6, 7],
    list: [{
        id: 100,
        name: "吃饭",
        isDone: true
      },
      {
        id: 101,
        name: "睡觉",
        isDone: false
      },
      {
        id: 102,
        name: "拉屎",
        isDone: true
      }
    ]
  },
  mutations: {
    // payload:载荷,如果要接收更多的数据,只能通过一个对象传递过来
    // mutation函数只有2个参数,第一个参数是state,第二个是payload,如果需要传递多个参数,可以传一个对象，在对象中定义多个属性
    add(state, num) {
      // console.log("我被触发了");
      //  所有mutation中的函数,第一个参数都是state
      // console.log(state);
      state.count += num

    },
    subtract(state, num) {
      state.count -= num
    },
    addBtn(state, payload) {
      state.count += payload.num
    },
    delBtn(state, payload) {
      state.count += payload.num
    }
  },
  actions: {

    // 每一个action函数第一个参数都是context
    // 上下文:指可以执行commit函数的对象,全局Vuex对象
    // context就是为了让action内可以调用mutation
    subAsync(context, payload) {
      // 在action函数中一般会做一步操作
      // 例如:1秒后修改count-1
      setTimeout(() => {
        // 异步的结果处不能直接修改state
        // 而且action函数中也没有state形参
        context.commit("addBtn", payload)
      }, 1000)
    }
  },
  getters: {
    // getters中定义的本质上也是一个函数
    // 所以getters中函数的第一个参数都是state
    // 为什么使用getters?
    // 因为计算属性只能在当前组件中使用,如果多个组件都需要依赖同一个计算属性,a那只能复制粘贴,而getters相当于一个全局的计算属性,可供每个组件的使用
    isAll(state) {
      return state.list.every(item => item.isDone)
    }
  }
})


// 4.挂载到Vue身上
new Vue({
  render: h => h(App),
  store
}).$mount('#app')